<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
 <!--  
  vue监测数据的原理：
  1.vue会监视data中所有层次的数据
  2.监测对象中的数据
    setter实现监视，且要在new Vue时就要传入要监测的数据
      （1） 对象后追加的属性，Vue默认不做响应式处理
      （2） 如需给后添加的属性做响应式，请使用如下API：
            Vue.set(target,propertyName/index,value)
            vm.$set(target,propertyName/index,value)
  3.监测数组中的数据
    通过包裹数组更新元素的方法实现，本质是：
       (1) 调用原生对应的方法对数组进行更新
       (2) 重新解析模版，进而更新页面
 -->
  <div id="root">
    <h1>
      <button @click="addSex">添加一个性别属性，默认值是男</button><br>
      <button @click="stu.sex='未知'">修改性别</button><br>
      <button @click="addFriend">在列表首位添加一个朋友</button><br>
      <button @click="updataFFriName">修改第一个朋友的名字为：赵六</button><br>
      <button @click="addHobby">添加一个爱好</button><br>
      <button @click="upDateHobby">修改第一个爱好为：开车</button><br>
      <button @click="removeSmoke">过滤掉爱好中的打游戏</button><br>
      <button @click="stu.age++">姓名：{{stu.name}}</button><br>
      <button @click="stu.age++">年龄+1</button><br>
      <button>爱好：</button><br>
      <h3>姓名：{{stu.name}}</h3>
      <h3>年龄：{{stu.age}}</h3>
      <h3 v-if="stu.sex">性别：{{stu.sex}}</h3>
      <h3>爱好：</h3>
      <ul>
        <li v-for="(h,index) in stu.hobby" :key="index">{{h}}</li>
      </ul>
      <h3>{{stu.name}}的朋友：</h3>
      <ul>
        <li v-for="(f,index) in stu.friends" :key='index'>
          {{f.name}} - {{f.age}}
        </li>
      </ul>
    </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。、
    const vm = new Vue({
      el: '#root',
      data: {
        school: {
          name: '尚硅谷',
          address: '北京'
        },
        stu: {
          name: "李华",
          age: 18,
          hobby: ['吃饭', '睡觉', '打游戏'],
          friends: [
            { name: "张三", age: 18 },
            { name: "李四", age: 23 }
          ]
        }
      },
      methods: {
        addSex() {
          // Vue.set(this.stu, 'sex', '男')
          this.$set(this.stu, 'sex', '男')
        },
        addFriend() {
          this.stu.friends.unshift({ name: "王五", age: 22 })
        },
        updataFFriName() {
          this.stu.friends[0].name = '赵六'
        },
        addHobby() {
          this.stu.hobby.push('学习')
        },
        upDateHobby() {
          // this.stu.hobby.splice(0, 1, '开车')
          // Vue.set(this.stu.hobby, 0, '开车')
          this.$set(this.stu.hobby, 0, '开车')
        },
        removeSmoke() {
          this.stu.hobby = this.stu.hobby.filter((h) => {
            return h !== '打游戏'
          })
        }
      },
    })
  </script>
</body>

</html>